import React, { Component } from 'react'
import PubSub from 'pubsub-js'
export default class Search extends Component {
  search = async () => {
    console.log('Search组件发布消息了');
    PubSub.publish('getData', { isFirst: false, loading: true })
    let { inputEle: { value: keyWord } } = this
    try {
      const response = await fetch(`https://api.github.com/search/users?q=${keyWord}`)
      const result = await response.json()
      PubSub.publish('getData', { isFirst: false, loading: false, avatars: result.items })
    } catch (error) {
      console.log(error);
      PubSub.publish('getData', { loading: false, error: error.message })
    }
  }
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索github用户</h3>
        <div>
          <input ref={(c) => this.inputEle = c} type="text" placeholder="输入搜索的名称" />
          &nbsp;<button onClick={this.search}>搜索</button>
        </div>
      </section>
    )
  }
}
